import React, { Component } from 'react'
import { Radio } from 'antd';

export default class RadioShow extends Component {
    state = {
        value: null,
    };

    onChange = e => {
        this.setState({
            value: e.target.value,
        });
    };

    render() {
        if (this.props.isSubmit) {
            this.props.handleData(this.props.id, this.state.value)
        }
        
        var temp;

        if (this.props.isRequired) {
            temp = <span style={{
                color: '#f00'
            }}>
                *
            </span>
        }

        return (
            <div style={{
                fontSize: 30,
                paddingLeft: 50
            }}>
                <div style={{
                    paddingTop: 20,
                    paddingBottom: 20
                }}>
                    <span style={{
                        fontWeight: 'bold'
                    }}>{`${this.props.index + 1}. `}</span>
                    <span>{this.props.title}</span>
                    {temp}
                </div>
                <Radio.Group onChange={this.onChange} value={this.state.value}>
                    {
                        this.props.options.map((item, index) => {
                            return (
                                <div key={index} style={{
                                    paddingBottom: 20
                                }}>
                                    <Radio value={index}>{item}</Radio>
                                </div>
                            )
                        })
                    }
                </Radio.Group>
            </div>
        )
    }
}
